<template>
  <div>
    <a-tabs v-model:activeKey="activeKey" class="content">
      <a-tab-pane v-for="(item, index) in swiperData" :key="(index + 1).toString()" tab="Tab 3">
        <div class="swiper">
          <div class="jux" v-for="(el, index) in item" :key="index" @click="handlejux(el)">
            <div :class="el.vcode == juxactive ? 'juxactive' : ''" style="height: 100%">
              <div style="padding: 18px">
                <div :class="iconType"></div>
                <div class="swipertitle" :title="el.vname">{{ el.vname }}</div>
                <!-- caseNum -->
                <div class="jq">警情数:</div>
                <div class="fontnumberjq">
                  <div
                    class="fontborder"
                    style="justify-content: none"
                    v-for="(caseItem, indexel) in el.caseNum"
                    :key="indexel"
                    :style="{ fontSize: setFontSize(el.caseNum) }"
                  >
                    {{ caseItem }}
                  </div>
                </div>
                <div class="swiperinfo">
                  <div class="infoborder" style="text-align: center">
                    <div class="number fontnumber">{{ el.yjCount }}</div>
                    <div class="infoname" style="text-align: center">AI预警</div>
                  </div>
                  <div class="infoborder">
                    <div class="number fontnumber">-</div>
                    <div class="infoname">数据质量</div>
                  </div>
                  <div class="proportion">
                    <div class="detailinfo">
                      <div class="infoname contrast">同比:</div>
                      <div style="padding: 0 5px; color: #ffffff">
                        <span class="hide">
                          <a-tooltip>
                            <template #title>
                              {{ el.yoyRatio ? el.yoyRatio : '-' }}{{ el.yoyRatio ? '%' : '' }}
                            </template>
                            {{ el.yoyRatio ? el.yoyRatio : '-' }}{{ el.yoyRatio ? '%' : '' }}
                          </a-tooltip>
                        </span>
                      </div>
                      <div style="color: #e99220" v-if="el.yoyRatio && el.yoyRatio > 0">↑</div>
                      <div style="color: #66ff00" v-if="el.yoyRatio && el.yoyRatio < 0">↓</div>
                    </div>
                    <div style="margin-top: 23px" class="detailinfo">
                      <div class="infoname contrast">环比:</div>
                      <div style="padding: 0 5px; color: #ffffff">
                        <span class="hide">
                          <a-tooltip>
                            <template #title>
                              {{ el.chainRatio ? el.chainRatio : '-'
                              }}{{ el.chainRatio ? '%' : '' }}
                            </template>
                            {{ el.chainRatio ? el.chainRatio : '-' }}{{ el.chainRatio ? '%' : '' }}
                          </a-tooltip>
                        </span>
                      </div>
                      <div style="color: #e99220" v-if="el.chainRatio && el.chainRatio > 0">↑</div>
                      <div style="color: #66ff00" v-if="el.chainRatio && el.chainRatio < 0">↓</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>

    <div class="dogs">
      <div
        v-for="(item, index) in swiperData"
        class="dogsBtn"
        :class="index + 1 == activeKey ? 'dogsActive' : ''"
        @click="handleDogBtn(index + 1)"
      ></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    swiperData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    juxactive: {
      type: String,
      default: () => {
        return '';
      },
    },
    iconType: {
      type: String,
      default: () => {
        return 'ai';
      },
    },
  },
  setup(props, context) {
    const activeKey = ref<string>('1');
    const handleDogBtn = value => {
      activeKey.value = value.toString();
      console.log('activeKey', activeKey.value);
    };
    const handleactiveKey = () => {
      activeKey.value = '1';
      console.log('zhixingle');
    };
    const handlejux = value => {
      context.emit('handlejux', value);
    };
    const setFontSize = value => {
      let size = 25;
      if (value.length <= 5) {
        size = 25;
      } else if (value.length == 6) {
        size = 20;
      } else if (value.length > 6) {
        size = 12;
      }
      return size + 'px';
    };
    return {
      activeKey,
      handleDogBtn,
      setFontSize,
      handlejux,
      handleactiveKey,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  height: 43vh;
}
:deep(.ant-tabs-nav-wrap) {
  display: none;
}
.dogs {
  display: flex;
  justify-content: center;
  .dogsBtn {
    width: 60px;
    height: 10px;
    margin: 0 10px;
    background: black;
    border: 2px solid #4467bd;
  }
}
.dogsActive {
  background: #4467bd !important;
}
.swiper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  //   justify-content: space-around;
  width: 100%;
  height: 49.3vh;

  overflow: auto;
  .jux {
    position: relative;
    width: 32%;
    height: 210px;
    margin-top: 6px;
    margin-left: 10px;
    background-image: url(~@/assets/image/statistics/jux.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .juxactive {
    background-image: url(~@/assets/image/statistics/juxactive.png) !important;
    background-size: 100% 100%;
  }
  .ai {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url(~@/assets/image/statistics/ai.svg);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .jie {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url(~@/assets/image/statistics/jie.svg);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .fan {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url(~@/assets/image/statistics/fan.svg);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .swipertitle {
    overflow: hidden;
    color: #ffffff;
    font-weight: 400;
    font-size: 20px;
    font-family: Source Han Sans CN;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .jq {
    margin: 5px 0;
    color: #b9c4dd;
    font-weight: 400;
    font-size: 13px;
    font-family: Microsoft YaHei;
  }
  .swiperinfo {
    display: flex;
    margin-top: 15px;
    .number {
      height: 25px;
      margin-bottom: 13px;
      color: #ffffff;
      font-weight: 400;
      font-size: 26px;

      text-align: center;
    }
    .infoborder {
      border-right: 1px solid #3c4454;
    }
    .infoname {
      color: #b9c4dd;
      font-weight: 400;
      font-size: 12px;
      text-align: center;
    }
    .contrast {
      width: 30px;
    }
  }
  .swiperinfo > .infoborder:nth-child(1) {
    width: 20%;
    text-align: left;
    .number {
      text-align: center;
    }
    .infoname {
      text-align: left;
    }
  }
  .swiperinfo > .infoborder {
    width: 33%;
  }
  .proportion {
    margin-left: 10px;
    font-size: 12px;
    .detailinfo {
      display: flex;
      align-items: center;
      .hide {
        display: block;
        flex: 1;
        width: 64px;
        min-width: 0;
        overflow: hidden;
        font-weight: normal;
        white-space: nowrap;
        text-align: left;
        text-overflow: ellipsis;
      }
    }
  }
}
.fontnumberjq {
  display: flex;
  height: 40px;
  color: #1dd6e3;
  font-weight: bold;
  font-size: 30px;
  font-family: Agency FB;
  line-height: 40px;
}
.fontborder {
  padding: 2px 10px;
  background: rgba(0, 255, 240, 0);
  border: 1px solid rgba(87, 97, 123, 0.6);
  border-radius: 2px;
}
:deep(.ant-tabs-bar) {
  display: none;
  border: 0;
}
:deep(.ant-tabs-bar .ant-tabs-top-bar) {
  display: none;
}
@media screen and (max-width: 1600px) {
  .swiper .jux {
    width: 48% !important;
    background-size: 100% 100%;
  }
}
@media screen and (max-width: 2160px) {
  .content {
    height: 38vh;
  }
  .swiper .jux:last-child {
    margin-bottom: 50px;
  }
  .swiper {
    height: 42vh !important;
    .jux {
      height: 23vh !important;
    }
  }
}
@media screen and (max-width: 1856px) {
  .content {
    height: 38vh;
  }
  .swiper .jux:last-child {
    margin-bottom: 50px;
  }
  .swiper {
    height: 42vh !important;
    .jux {
      height: 18vh !important;
    }
  }
}
@media screen and (max-width: 1680px) {
  .content {
    height: 38vh;
  }
  .swiper .jux:last-child {
    margin-bottom: 50px;
  }
  .swiper {
    height: 42vh !important;
    .jux {
      height: 24vh !important;
    }
  }
}

@media screen and (min-height: 1140px) and (min-width: 1920px) {
  .swiper {
    height: 42vh !important;
    .jux {
      height: 18vh !important;
    }
  }
}
@media screen and (max-width: 1600px) {
  .content {
    height: 36vh;
  }
  .swiper .jux:last-child {
    margin-bottom: 0px;
  }
  .swiper {
    height: 35vh !important;
    .jux {
      height: 28vh !important;
    }
  }
}
</style>
